<%@ page contentType="text/html; charset=UTF-8"%>
<%
	String realPath = request.getContextPath() + "/";
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>南网图讯-首页</title>
<link type="text/css"
	href="<%=realPath%>zenithsun/news/mobile/css/basic.css"
	rel="stylesheet">
<link type="text/css"
	href="<%=realPath%>zenithsun/news/mobile/css/index.css"
	rel="stylesheet">
<script type="text/javascript"
	src="<%=realPath%>baseNew/plugins/jQuery/jQuery-2.2.0.min.js"></script>
<script
	src="<%=realPath%>zenithsun/news/mobile/js/jquery.mobile-1.4.3.min.js"></script>
<script src="<%=realPath%>zenithsun/news/mobile/js/jquery-latest.min.js"></script>
<script src="<%=realPath%>zenithsun/news/mobile/js/iscroll.js"></script>
<link type="text/css"
	href="<%=realPath%>zenithsun/news/mobile/css/scroll.css"
	rel="stylesheet">
<script type="text/javascript">
var pageNum = 1,limit = 10; //页码
var myScroll,
	pullDownEl, pullDownOffset,
	pullUpEl, pullUpOffset,
	generatedCount = 0;
/**
	* 下拉刷新 （自定义实现此方法）
	* myScroll.refresh();		// 数据加载完成后，调用界面更新方法
	*/
function pullDownAction () {
	/* setTimeout(function () {
	console.log("下拉刷新...");
		myScroll.refresh();		//数据加载完成后，调用界面更新方法   Remember to refresh when contents are loaded (ie: on ajax completion)
	}, 1000); */
	    pageNum = 1;
		$('#newsContainer').html('');
		doLoadNews();
		myScroll.refresh();
}
/**
	* 滚动翻页 （自定义实现此方法）
	* myScroll.refresh();		// 数据加载完成后，调用界面更新方法
	*/
function pullUpAction () {
	/* setTimeout(function () {	// <-- Simulate network congestion, remove setTimeout from production!
		console.log("上拉加载...");
		myScroll.refresh();		// 数据加载完成后，调用界面更新方法 Remember to refresh when contents are loaded (ie: on ajax completion)
	}, 1000); */	// <-- Simulate network congestion, remove setTimeout from production!
		$('#list').css('top','20px');   
	    pageNum = pageNum + 1;
		doLoadNews();
		$('#list').css('top','0px');
		myScroll.refresh();
}
/**
	* 初始化iScroll控件
	*/
$(function(){
	
	pullDownEl = document.getElementById('pullDown');
	pullUpEl = document.getElementById('pullUp');
	pullDownOffset = pullDownEl.offsetHeight;
	pullUpOffset = pullUpEl.offsetHeight;
	
	var id='list';
	var yLen=30;
	var hei=document.getElementById(id).maxScrollY;
	myScroll = new iScroll(id, {
		useTransition: false,
		topOffset: pullDownOffset,
		onRefresh: function () {
			if (pullDownEl.className.match('loading')) {
				pullDownEl.className = '';
				//pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
			} else if (pullUpEl.className.match('loading')) {
				pullUpEl.className = '';
				//pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
			}
		},
		onScrollMove: function () {
			if (this.y >= yLen && !pullDownEl.className.match('flip')) {
				pullDownEl.className = 'flip';
				pullDownEl.querySelector('.pullDownLabel').innerHTML = '松手开始更新...';
				this.minScrollY = 0;
			} else if (this.y < yLen && pullDownEl.className.match('flip')) {
				pullDownEl.className = '';
				pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
				this.minScrollY = -pullDownOffset;
			}
			else if (this.y < (this.maxScrollY - yLen) && !pullUpEl.className.match('flip')) {
				pullUpEl.className = 'flip';
				pullUpEl.querySelector('.pullUpLabel').innerHTML = '松手开始更新...';
				//this.maxScrollY = this.maxScrollY;hei
				this.maxScrollY = hei;
			} else if (this.y > (this.maxScrollY + yLen) && pullUpEl.className.match('flip')) {
				pullUpEl.className = '';
				pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
				this.maxScrollY = pullUpOffset;
			}
			
		},
		onScrollEnd: function () {
			if (pullDownEl.className.match('flip')) {
				pullDownEl.className = 'loading';
				pullDownEl.querySelector('.pullDownLabel').innerHTML = '加载中...';				
				pullDownAction();	// Execute custom function (ajax call?)
			}
				else if (pullUpEl.className.match('flip')) {
				pullUpEl.className = 'loading';
				pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载中...';				
				pullUpAction();	// Execute custom function (ajax call?)
			}
			
		}
	});
	//setTimeout(function () { document.getElementById(id).style.left = '0'; }, 800);
	doLoadNews();
});
	var ncId="${newscolumnId}";
	function doLoadNews() {
		$.post("<%=realPath%>/path/newsinfo/listnewsjson", {
			"ncId" : ncId,
			"pageNo" : pageNum,
			"limit" : limit
		}, function(result) {
			if (result.state == 'Success') {
				createNewsByTemplate(result.content);
			} else {
				alert("操作失败,原因：" + result.content);
			}
		});
	}
	String.prototype.replaceAll = function(s1, s2) {
		return this.replace(new RegExp(s1, "gm"), s2);
	};
	/**
	 * 根据模板创建新闻信息
	 */
	function createNewsByTemplate(pageResult) {
		var template = $('#newsTemplate').html();
		if (pageResult.items.length > 0) {
			for (var index = 0; index < pageResult.items.length; index++) {
				var newsInfo = pageResult.items[index];
				var currNews = template;
				currNews = currNews.replaceAll("%news.id%", newsInfo.id);
				currNews = currNews.replaceAll("%news.coverPath%",
						newsInfo.coverPath);
				currNews = currNews.replaceAll("%news.title%",
						newsInfo.title);
				currNews = currNews.replaceAll("%news.picNum%",
						newsInfo.picNum + "张");
				currNews = currNews.replaceAll("%news.publishTime%",
						newsInfo.publishTime);
				currNews = currNews.replaceAll("%news.editor%",
						getNotBlank(newsInfo.editor));
				currNews = currNews.replaceAll("%news.photographer%",
						getNotBlank(newsInfo.photographer));
				currNews = currNews.replaceAll("%news.browseCount%", 100);
				$('#newsContainer').append(currNews);
			}
		} else {
			//alert("没有新闻了");
			$('#pullUpLabel').html('没有新闻了');
		}
	}
	
	function getNotBlank(v) {
		if (v == undefined) {
			return "";
		} else {
			return v;
		}
	}
</script>
</head>
<body>
<div id="listPage" data-role="page" data-theme="a" >
		<div id="list" class="ui-content" role="main" style="padding:0px;">
			<div id="shishi" name="shishi"  class="listDiv"  >
				<div id="pullDown">
					<span class="pullDownIcon"></span>
					<span class="pullDownLabel">下拉刷新...</span>
				</div>
				<!--内容模块-->
					<div class="main-content">
					    <section class="ind-list-grid" id="newsContainer">
					    </section>
						<div id="newsTemplate" style="display: none;">
					        <div class="mod-img-area">
					            <a href="<%=realPath%>/path/newsinfo/viewnewsphone?id=%news.id%" class="mod-link-btn fn-pr">
					                <img src="<%=realPath%>%news.coverPath%" alt="">
					                <div class="mod-img-info-grid">
					                    <div class="mod-wrap">
					                        <h2 title="" class="mod-img-title fn-wto">%news.title%</h2>
					                        <div class="mod-img-desc clearfix">
					                            <p class="fn-fl fn-wto">编辑：%news.editor% / 摄影：%news.photographer%</p>
					                            <p class="fn-fr fn-wto">
					                                <span class="ind-time fn-fl">%news.publishTime%</span>
					                                <span class="ind-num fn-fr"><i class="i-eye"></i>%news.browseCount%</span>
					                            </p>
					                        </div>
					                    </div>
					                </div>
					            </a>
					        </div>
						</div>
					</div>
					<!-- /content -->
				<div id="pullUp">
					<span class="pullUpIcon"></span>
					<span class="pullUpLabel" id="pullUpLabel"></span>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
	
	</script>
</body>
</html>